<%--
  Created by IntelliJ IDEA.
  User: 石小俊
  Date: 2024/11/16
  Time: 13:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script>
        function checkUsername() {
            // 获取ajax引擎对象,
            let xhr = new XMLHttpRequest();

            // 准备回调函数,返回响应之后调用的函数
            xhr.onreadystatechange = function () {
                // console.log("当前状态:"+xhr.readyState);
                // 当响应返回且响应成功时才需要处理响应数据
                // 即ajax状态值为4且HTTP状态值为200时处理响应
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let result = xhr.responseText;
                    console.log(result)
                    document.getElementById("s1").innerHTML = result;
                }
            };
            let username = document.getElementById("username").value;
            // get请求处理方式
            // 建立与服务器的连接
            <%--xhr.open("get", "${pageContext.request.contextPath}/checkUsername?username=" + username);--%>
            <%--// 发送请求--%>
            <%--xhr.send(null)--%>

            // post请求
            // 建立与服务器的连接
            xhr.open("post", "${pageContext.request.contextPath}/checkUsername");
            // 设置请求头,此时默认数据格式为text/plain,需要修改为application/x-www-form-urlencoded
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            // 发送请求
            xhr.send("username=" + username)
        }
    </script>
</head>
<body>
<h1>用户注册</h1>
<hr>
<form action="#" method="post" enctype="">
    用户名:<input type="text" name="username" id="username" onblur="checkUsername()"><span id="s1"></span><br>
    密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"><br>
    电&nbsp;&nbsp;&nbsp;话:<input type="text" name="phone"><br>
    地&nbsp;&nbsp;&nbsp;址:<input type="text" name="address"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>
